<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script>
    window.onload=function(){
        var radioA=document.getElementById("radio-a");
        var radioB=document.getElementById("radio-b");
        var strA=document.getElementById("str-a");
        var strB=document.getElementById("str-b");
        var numA=document.getElementById("num-a");
        var numB=document.getElementById("num-b");
        var result=document.getElementById("result");
        var button=document.getElementsByTagName("button");
        button[0].addEventListener("click",contentLength);
        button[1].addEventListener("click",contentThird);
        button[2].addEventListener("click",concat);
        button[3].addEventListener("click",indexOf);
        button[4].addEventListener("click",lastIndexOf);
        button[5].addEventListener("click",slice);
        button[6].addEventListener("click",line);
        button[7].addEventListener("click",substr);
        button[8].addEventListener("click",UpperCase);
        button[9].addEventListener("click",LowerCase);
        button[10].addEventListener("click",ENsPAcE);
        button[11].addEventListener("click",replace);
        
        //获取当前选中输入的内容长度
        function contentLength(){
            if(radioA.checked){
              result.innerHTML=strA.value.length
            }else if(radioB.checked){
                result.innerHTML=strB.value.length
            }
        }
        //当前选中输入中的第3个字符
        function contentThird(){
            if(radioA.checked){
              result.innerHTML=strA.value[2];
            }else if(radioB.checked){
                result.innerHTML=strB.value[2];
            }
        } 
       
        //把两个输入框的文字连接在一起输出（concat）
        function  concat(){
        result.innerHTML=strA.value.concat(strB.value);
        }
       
        //输入B中的内容，在输入A的内容中第一次出现的位置
        function indexOf(){
           result.innerHTML=strA.value.indexOf(strB.value);
        }
        
        //输入A中的内容，在输入B的内容中最后一次出现的位置
        function lastIndexOf(){
            result.innerHTML=strB.value.lastIndexOf(strA.value);
        }
      
        // 使用slice获取选中输入框内容的部分内容，参数为num-a及num-b
        function slice(){
        if(radioA.checked){
              result.innerHTML=strA.value.slice(numA.value,numB.value);  
            }else if(radioB.checked){
                result.innerHTML=strB.value.slice(numA.value,numB.value);
            }
       }
      
        // 当前选中输入框的行数   有问题做不出来啊
        function line(){
         if(radioA.checked){   
            }else if(radioB.checked){         
            }
       }
      
        // 使用substr获取选中输入框内容的子字符串，参数为num-a及num-b
        function substr(){
          if(radioA.checked){
            result.innerHTML=strA.value.substr(numA.value,numB.value); 
            }else if(radioB.checked){
                result.innerHTML=strB.value.substr(numA.value,numB.value);
            }
        }
        
        // 把所选输入框中的内容全部转为大写
         function UpperCase(){
                if(radioA.checked){
             result.innerHTML=strA.value.toUpperCase();    
        }
        else if(radioB.checked){
            result.innerHTML=strB.value.toUpperCase();
        } 
            }   
       
        //把所选输入框中的内容全部转为小写
         function  LowerCase(){
        if(radioA.checked){
             result.innerHTML=strA.value.toLowerCase();    
        }
        else if(radioB.checked){
            result.innerHTML=strB.value.toLowerCase();
        } 
        } 
        
        //把所选输入框中内容的半角空格全部去除
        function ENsPAcE(){
            if(radioA.checked){
             result.innerHTML= strA.value.replace(/\s/g, '');
        }else if(radioB.checked){
            result.innerHTML= strB.value.replace(/\s/g, '');
        }
        }
        
        //把所选输入框中内容的a全部替换成另外一个输入框中的内容
         function replace() {
            if(radioA.checked){
                result.innerHTML=strA.value.replace("a",strB.value);         
         }
        else if(radioB.checked){
              result.innerHTML=strB.value.replace("a",strA.value);
        }   
         }
    }

</script>



<body>
        <div>
                <label>String A:
                    <input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
                </label>
                <textarea id="str-a"></textarea>
                <label>String B:
                    <input id="radio-b" type="radio" name="str-obj" value="b">
                </label>
                <textarea id="str-b"></textarea>        
                <label>Num A：<input id="num-a" type="number" value="0"></label>
                <label>Num B：<input id="num-b" type="number" value="1"></label>
            </div>
            <div>
                <button>获取当前选中输入的内容长度</button>
                <button>当前选中输入中的第3个字符</button>
                <button>把两个输入框的文字连接在一起输出（concat）</button>
                <button>输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
                <button>输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
                <button>使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
                <button>当前选中输入框的行数</button>
                <button>使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
                <button>把所选输入框中的内容全部转为大写</button>
                <button>把所选输入框中的内容全部转为小写</button>
                <button>把所选输入框中内容的半角空格全部去除</button>
                <button>把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
            </div>
            <p id="result"></p>
    
</body>
</html>